<template>
	<view class="suggest-box">
		<view class="content-tab">
			<view class="view" :class="{'active':tabIdx== index}" v-for="(item,index) in tabList" :key="index"
				@click="checkTab(index)">{{item}}</view>
		</view>
		<view class="content-box">
			<view class="invite-list-item" v-if="form.dataList&&form.dataList.length > 0" v-for="(item, index) in form.dataList" :key="index">
				<view class="invite-list-item-top">
					<view class="view">
						<span class="color-icon-1 span-1" v-if="item.commentType == 1">新租</span>
						<span class="color-icon-2 span-1" v-if="item.commentType == 2">续租</span>
						<span class="color-icon-3 span-1" v-if="item.commentType == 3">退租</span>
						<span class="color-icon-4 span-1" v-if="item.commentType == 4">企业家人入住</span>
						<span class="color-icon-5 span-1" v-if="item.commentType == 5">员工迁出</span>
						<span class="content-1 span-2" v-if="item.commentType == 1 || item.commentType == 2 || item.commentType == 3">{{item.messageContent}}</span>
						<span class="content-1 span-3" v-else>{{item.messageContent}}</span>
					</view>
				</view>
				<view class="invite-list-item-btn" @click="editSuggestion(item)">{{form.status==0?'点击去评价':'查看评价'}}</view>
			</view>
			<view v-else>
				<u-empty mode="data" icon="https://www.mescroll.com/img/mescroll-empty.png"></u-empty>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { getSuggestionList } from "@/common/API/notice"
	import { reactive, ref } from 'vue'
	import { onShow } from "@dcloudio/uni-app"
	const tabList = reactive(['待评价', '已评价'])
	const tabIdx = ref(0)
	
	const form = reactive({
		dataList:[],
		status: 0
	})
	onShow(() => {
		getList()
	})
	//获取评价列表
	const getList = async () => {
		uni.showLoading({
			title:'加载中...'
		});
		let res = await getSuggestionList(form.status)
		if(res){
			uni.hideLoading()
			let arr = []
			res.map((m,n)=>{
				let list = []
				if(m.list.length > 0){
					m.list.map((l,s)=>{
						l.commentType = m.commentType
						list.push(l)
					})
				}
				arr = [...arr, ...list]
			})
			console.log(arr)
			form.dataList = arr
		}
	}
	//切换tab
	const checkTab = (index) => {
		tabIdx.value = index
		if(index == 0){
			form.status = 0
		}else if(index == 1){
			form.status = 1
		}
		getList()
	}
	//跳转新增、详情
	const editSuggestion = (item) => {
		if(form.status == 0){
			uni.navigateTo({
			  url: `/pages/personal/suggestion/add?info=${encodeURIComponent(JSON.stringify({...item, from:'suggestion'}))}`
			})
		}else if(form.status == 1){
			uni.navigateTo({
				url: `/pages/personal/suggestion/detail?id=${item.id}&commentType=${item.commentType}`
			})
		}
	}
</script>
<style>
	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.suggest-box {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.content-tab {
		display: flex;
		background: #fff;
		border-bottom: 1px solid rgba(229, 229, 229, 1);

		.view {
			flex: 1;
			text-align: center;
			padding: 20rpx 0;
			color: rgba(102, 102, 102, 1);
		}

		.view.active {
			color: rgba(253, 150, 24, 1);
			position: relative;

			&::before {
				content: " ";
				position: absolute;
				left: 50%;
				transform: translateX(-24rpx);
				bottom: 0;
				width: 48rpx;
				height: 4rpx;
				border-top: 4rpx solid rgba(253, 150, 24, 1);
			}
		}
	}

	.content-box {
		flex: 1;
		overflow-y: auto;
		// padding-bottom: 40rpx;
		.invite-list-item {
			margin: 32rpx;
			background: #fff;
			padding: 0 32rpx;
			border-radius: 8rpx;
			box-shadow: 0px 6px 32px rgba(0, 0, 0, 0.03);

			.invite-list-item-top {
				border-bottom: 1px solid rgba(229, 229, 229, 1);
				padding: 32rpx 0;

				.view {
					color: rgba(0, 0, 0, 1);
					font-size: 32rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					max-height: 140rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					.span-1{
						padding: 2rpx 16rpx;
						display: inline-block;
						color: #fff;
						border-radius: 4rpx;
						font-size: 40rpx;
					}

					.color-icon-1 {
						background: rgba(67, 207, 124, 1);
						transform: scale(0.5);
						margin-left: -30rpx;
					}

					.color-icon-2 {
						background: rgba(0, 178, 255, 1);
						transform: scale(0.5);
						margin-left: -30rpx;
					}

					.color-icon-3 {
						background: rgba(242, 85, 85, 1);
						transform: scale(0.5);
						margin-left: -30rpx;
					}

					.color-icon-4 {
						background: rgba(253, 150, 24, 1);
						transform: scale(0.5);
						margin-left: -60rpx;
					}
					.color-icon-5 {
						background: rgba(242, 85, 85, 1);
						transform: scale(0.5);
						margin-left: -50rpx;
					}
					.span-2{
						margin-left: -20rpx;
					}
					.span-3{
						margin-left: -40rpx;
					}
				}
			}

			.invite-list-item-btn {
				text-align: center;
				color: rgba(102, 102, 102, 1);
				font-size: 28rpx;
				padding: 28rpx 0;
			}
		}
	}
</style>